<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <select name="provice">
        <option value="0">--请选择省份--</option>
    </select>
    <select name="city">
        <option value="0">--请选择城市--</option>
    </select>
</div>
</body>
<script src="./data/data.js"></script>
<script>
    const provice = document.querySelector("select[name=provice]");
    const city = document.querySelector("select[name=city]");
    Object.keys(cityJson["0"]).forEach(key=>{
        provice.innerHTML+=(`
            <option value="0,${key}">${cityJson["0"][key]}</option>
        `)
    });
    provice.onchange = function(){
        city.innerHTML = `<option value="0">--请选择城市--</option>`;
        Object.keys(cityJson[this.value]).forEach(key=>{
            city.innerHTML+=(`
                <option value="0,${key}">${cityJson[this.value][key]}</option>
            `)
        });
    }
</script>
</html>